<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">车辆录入保险价格明细</span>
      </div>

      <el-row>
        <el-col>
          <el-table v-if="detailForm.insuranceVoList" :data="detailForm.insuranceVoList"
                    :summary-method="getSummaries"
                    show-summary
                    style="width: 100%">
            <el-table-column align="center" type="index"width="50" fixed="left" />

            <el-table-column align="center" label="车架号" fixed="left"  prop="vinNo" min-width="160"/>

            <el-table-column align="center" label="保费合计" fixed="left"  min-width="120">
              <template #default="{row}">
                <span>{{ handleTotal(row) }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="车船税" min-width="160" prop="carTax">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.carTax'"
                              :rules="{required: requiredCarTax,trigger: 'blur'}"
                              :class="handleClass(row.carTax, $index, detailForm.carTax) ? 'redColor' :''">
                  <el-input v-if="isEdit"
                            :disabled="detailForm.carTaxStatus == 2"
                            v-model="row.carTax" placeholder="请输入车船税费用" v-thousand
                            @change="changeTable(row, $index, 'carTax')" size="mini"/>
                  <span v-else :class="handleClass(row.carTax, $index, detailForm.carTax) ? 'redSpan' :''">
                    {{ format_thousand(row.carTax) }}
                  </span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险保费" min-width="160" prop="jqxAmount">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxAmount'"
                              :rules="{required: isEdit,trigger: 'blur'}"
                              :class="handleClass(row.jqxAmount, $index, detailForm.jqxAmount) ? 'redColor' :''">
                  <el-input v-if="isEdit" v-model="row.jqxAmount" placeholder="请输入交强险保费" v-thousand
                            @change="changeTable(row, $index, 'jqxAmount')" size="mini"/>
                  <span v-else :class="handleClass(row.jqxAmount, $index, detailForm.jqxAmount) ? 'redSpan' :''">
                    {{ format_thousand(row.jqxAmount) }}
                  </span>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险保费" min-width="160" prop="syxAmount">
              <template #default="{row,$index}">
                <el-form-item class="formTable">
                  <span>{{ handleSyxAmount(row, $index) }}</span>
                </el-form-item>
              </template>
            </el-table-column>

            <!--商业险-->

            <el-table-column label="商业险" align="center">

              <el-table-column align="center" label="第三责任险" min-width="140" prop="szxPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable"
                                :class="handleColor(row.szxPrice, $index, 'szxPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.szxPrice" placeholder="请输入第三责任险" v-thousand
                              :disabled="handleDisabled('szxPrice')" @change="changeTableSyx(row, $index, 'szxPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.szxPrice, $index, 'szxPrice') ? 'redSpan' :''">{{
                        format_thousand(row.szxPrice)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车上人员责任保险(乘客)" min-width="180" prop="ckPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :class="handleColor(row.ckPrice, $index, 'ckPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.ckPrice" placeholder="请输入车上人员责任保险(乘客)" v-thousand
                              :disabled="handleDisabled('ckPrice')" @change="changeTableSyx(row, $index, 'ckPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.ckPrice, $index, 'ckPrice') ? 'redSpan' :''">{{
                        format_thousand(row.ckPrice)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车上人员责任保险人(驾驶员)" min-width="195" prop="jsyPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable"
                                :class="handleColor(row.jsyPrice, $index, 'jsyPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.jsyPrice" placeholder="请输入车上人员责任保险人(驾驶员)"
                              v-thousand
                              :disabled="handleDisabled('jsyPrice')" @change="changeTableSyx(row, $index, 'jsyPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.jsyPrice, $index, 'jsyPrice') ? 'redSpan' :''">{{
                        format_thousand(row.jsyPrice)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车辆损失险" min-width="140" prop="csxPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable"
                                :class="handleColor(row.csxPrice, $index, 'csxPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.csxPrice" placeholder="请输入车辆损失险" v-thousand
                              :disabled="handleDisabled('csxPrice')" @change="changeTableSyx(row, $index, 'csxPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.csxPrice, $index, 'csxPrice') ? 'redSpan' :''">{{
                        format_thousand(row.csxPrice)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="轮胎单独损失险" min-width="140" prop="clPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :class="handleColor(row.clPrice, $index, 'clPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.clPrice" placeholder="请输入轮胎单独损失险" v-thousand
                              :disabled="handleDisabled('clPrice')" @change="changeTableSyx(row, $index, 'clPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.clPrice, $index, 'clPrice') ? 'redSpan' :''">{{
                        format_thousand(row.clPrice)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车身划痕损失险" min-width="140" prop="hhxPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable"
                                :class="handleColor(row.hhxPrice, $index, 'hhxPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.hhxPrice" placeholder="请输入车身划痕损失险" v-thousand
                              :disabled="handleDisabled('hhxPrice')" @change="changeTableSyx(row, $index, 'hhxPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.hhxPrice, $index, 'hhxPrice') ? 'redSpan' :''">{{
                        format_thousand(row.hhxPrice)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="其他险种" min-width="140" prop="qtPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :class="handleColor(row.qtPrice, $index, 'qtPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.qtPrice" placeholder="请输入其他险种" v-thousand
                              :disabled="handleDisabled('qtPrice')" @change="changeTableSyx(row, $index, 'qtPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.qtPrice, $index, 'qtPrice') ? 'redSpan' :''">
                      {{ format_thousand(row.qtPrice) }}
                    </span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="增值服务特约条款险" min-width="140" prop="zzfwPrice">
                <template #default="{row,$index}">
                  <el-form-item class="formTable"
                                :class="handleColor(row.zzfwPrice, $index, 'zzfwPrice') ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.zzfwPrice" placeholder="请输入其他险种" v-thousand
                              :disabled="handleDisabled('zzfwPrice')" @change="changeTableSyx(row, $index, 'zzfwPrice')"
                              size="mini"/>
                    <span v-else :class="handleColor(row.zzfwPrice, $index, 'zzfwPrice') ? 'redSpan' :''">
                      {{ format_thousand(row.zzfwPrice) }}
                    </span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>

            <!--其他险种-->

            <el-table-column label="其他险种" align="center">
              <el-table-column align="center" label="其他保险备注" min-width="160" prop="otherInsuranceRemark">
                <template #default="{row,$index}">
                  <el-form-item class="formTable">
                    <el-input v-if="isEdit" v-model="row.otherInsuranceRemark" placeholder="请输入其他险种备注"
                              :disabled="detailForm.otherOpenStatus == 0" size="mini"/>
                    <span v-else>{{ row.otherInsuranceRemark }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="其他保险保费合计" min-width="160" prop="otherInsuranceSumAmount">
                <template #default="{row,$index}">
                  <el-form-item class="formTable"
                                :class="handleClass(row.otherInsuranceSumAmount, $index, detailForm.otherInsuranceSumAmount) ? 'redColor' :''">
                    <el-input v-if="isEdit" v-model="row.otherInsuranceSumAmount" placeholder="请输入其他险种保费"
                              :disabled="detailForm.otherOpenStatus == 0" v-thousand
                              @change="changeTable(row, $index, 'otherInsuranceSumAmount')" size="mini"/>
                    <span v-else
                          :class="handleClass(row.otherInsuranceSumAmount, $index, detailForm.otherInsuranceSumAmount) ? 'redSpan' :''">{{
                        format_thousand(row.otherInsuranceSumAmount)
                      }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "vehicleEntry", //车辆录入
  dicts: ["insurance_project"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
    requiredCarTax() {
      if (this.value.carTaxStatus) {
        if (Number(this.value.carTaxStatus) === 1 && this.isEdit) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    handleTotal() {
      return function (val) {
        return this.format_thousand(
            Number(val.carTax) +
            Number(val.jqxAmount) +
            Number(val.szxPrice) +
            Number(val.ckPrice) +
            Number(val.jsyPrice) +
            Number(val.csxPrice) +
            Number(val.clPrice) +
            Number(val.hhxPrice) +
            Number(val.qtPrice) +
            Number(val.zzfwPrice) +
            Number(val.otherInsuranceSumAmount)
        );
      };
    },
    handleColor() {
      return function (val, i, str) {
        let boole = false;
        let key_ = this.dict.type.insurance_project
            .map((a) => {
              if (str === a.raw.remark) {
                return a.value;
              }
            })
            .filter((a) => a)[0];
        let index = this.value.businessList.findIndex(
            (a) => a.insuranceProCode == key_
        );
        if (index !== -1) {
          if (val !== this.value.businessList[index].insurancePrice) {
            boole = true;
          }
        }
        return boole;
      };
    },
    handleClass() {
      return function (val, i, str) {
        let boole = false;
        if (Number(val) !== Number(str)) {
          boole = true;
        }
        return boole;
      };
    },
    handleDisabled() {
      return function (str) {
        let boole = true;
        let key_ = this.dict.type.insurance_project
            .map((a) => {
              if (str === a.raw.remark) {
                return a.value;
              }
            })
            .filter((a) => a)[0];
        let index = this.value.businessList.findIndex(
            (a) => a.insuranceProCode == key_
        );
        if (index !== -1) {
          boole = false;
        }
        return boole;
      };
    },
  },
  watch: {},
  data() {
    return {};
  },
  created() {
  },
  methods: {
    handleSyxAmount(val) {
      let num = 0;
      num =
          Number(val.szxPrice) +
          Number(val.ckPrice) +
          Number(val.jsyPrice) +
          Number(val.csxPrice) +
          Number(val.clPrice) +
          Number(val.hhxPrice) +
          Number(val.qtPrice) +
          Number(val.zzfwPrice);
      this.$set(val, "syxAmount", num);
      return this.format_thousand(num);
    },

    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (row[field]) {
        if (msg.test(Number(row[field]))) {
          if (Number(row[field]) >= 0) {
            let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
            row[field] = _value;
          } else {
            row[field] = "";
          }
        } else {
          row[field] = "";
        }
      }
    },

    changeTableSyx(row, key, field) {
      let _value = 0;
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (row[field]) {
        if (msg.test(Number(row[field]))) {
          if (Number(row[field]) >= 0) {
            _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
            row[field] = _value;
          } else {
            row[field] = "";
          }
        } else {
          row[field] = "";
        }
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计';
          return;
        }
        if (index === 2) {
          sums[index] = this.handleCount();
          return;
        }
        if (index === 14) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev;
            }
          }, 0);
          sums[index] = this.format_thousand(sums[index])
          sums[index] += ' 元';

        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    handleCount() {
      let num = 0
      for (let i = 0; i < this.value.insuranceVoList.length; i++) {
        let val = this.value.insuranceVoList[i]
        num += Number(val.carTax) +
            Number(val.jqxAmount) +
            Number(val.szxPrice) +
            Number(val.ckPrice) +
            Number(val.jsyPrice) +
            Number(val.csxPrice) +
            Number(val.clPrice) +
            Number(val.hhxPrice) +
            Number(val.qtPrice) +
            Number(val.zzfwPrice) +
            Number(val.otherInsuranceSumAmount)
      }
      return `${this.format_thousand(num)} 元`
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}

::v-deep .redColor .el-form-item__content .el-input__inner {
  color: red !important;
}

.redSpan {
  color: red !important;
}
</style>


